<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="任务名" prop="ProcedureName">
            <el-input v-model="ruleForm.ProcedureName" readonly />
        </el-form-item>
        <el-form-item label="任务描述" prop="Desc">
            <el-input v-model="ruleForm.Desc" autocomplete="off" readonly />
        </el-form-item>
        <el-form-item label="员工" prop="EmployeeName">
            <el-select v-model="ruleForm.EmployeeName" placeholder="请选择菜单">
                <el-option v-for="menu in parentMenu" :label="menu.UserName" :value="menu.UserName"></el-option>
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'
import userprocedureapi from "../../api/userprocedureapi"
import userinfoapi from '../../api/userinfoapi'

const props = defineProps({
    id: {
        type: Number,
        required: true   //必填
    }
});
const emit = defineEmits(['onSave'])

interface RuleForm {
    ProcedureName: string
    Desc: string
    EmployeeName: string | null
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    ProcedureName: '',
    Desc: '',
    EmployeeName: '',
})

const parentMenu = ref<any>([])

userinfoapi.Query({}).then((res: any) => {
    parentMenu.value = res.data
    console.log("112",parentMenu.value)
})

const getData = () => {
    userprocedureapi.get(props.id!).then((res: any) => {
        ruleForm.value = res.data
    })
}
onMounted(() => {
    getData();
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("ruleForm.data", ruleForm.value)

            userprocedureapi.put(props.id, ruleForm.value).then((res: any) => {
                console.log("rws", res)
                if (res.code == 1) {
                    ElNotification({
                        title: 'Success',
                        message: '修改成功',
                        type: 'success',
                        duration: 800,
                        onClose: () => {
                            emit("onSave", true)
                        }
                    })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '失败',
                        type: 'error',
                        duration: 800,
                    })
                }
            }).catch(err => {
                ElNotification({
                    title: 'Error',
                    message: '失败',
                    type: 'error',
                    duration: 800,
                })
                console.log("err", err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style></style>